<template>
  <div class="pages trading-flow">
    <div class="pageLevel" v-if="!sub">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form :rules="rules">
          <el-row :gutter="10">
            <el-col style="width: 450px">
              <el-form-item label="交易时间:" label-width="100px">
                <el-date-picker size="small" v-model="selectdata.transactionTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px">
              <el-form-item label="交易类型:" label-width="100px">
                <el-select filterable size="small" style="width:180px" v-model="selectdata.typeTransaction" placeholder="全部">
                  <el-option v-for="(item, index) in typeTransaction" :key="index" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px">
              <el-form-item label="类型:" label-width="100px">
                <el-select filterable size="small" style="width:180px" v-model="selectdata.type" placeholder="全部">
                  <el-option v-for="(item,index) in type" :key="index" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px" v-if="isShop != 0">
              <el-form-item label="门店:" label-width="100px">
                <el-select filterable size="small" style="width:180px" v-model="selectdata.storeId" placeholder="全部">
                  <el-option v-for="(item,index) in storeLists" :key="index" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px">
              <el-form-item label="会员手机号:" label-width="100px">
                <el-input class="input" v-model="selectdata.keyWord" size="small" placeholder="请输入查询的会员手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col style="width: 250px">
              <el-form-item label="" label-width="100px">
                <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
              </el-form-item>
              <el-form-item label="" label-width="10px" v-if="setRole('导出')">
                <el-button type="primary" size="mini" class="Button" @click="download">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="dataList" stripe style="width: 100%">
          <el-table-column prop="payOrderNo" label="单号" align="center"></el-table-column>
          <el-table-column prop="tradeTime" :formatter="tradeTime" label="交易时间" align="center" width="200"></el-table-column>
          <el-table-column prop="typeName" label="交易类型" align="center"></el-table-column>
          <el-table-column prop="chlidTypeName" label="类型" align="center"></el-table-column>
          <el-table-column prop="iphone" label="会员手机" align="center"></el-table-column>
          <el-table-column prop="price" label="储值支付金额" :formatter="price" align="center"></el-table-column>
          <el-table-column prop="accountPrice" label="账户余额" align="center"></el-table-column>
          <el-table-column prop="shopName" v-if="isShop != 0" label="门店" align="center"></el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" @click="routerPush(scope.row.detailOrderNo,scope.row.chlidType,scope.row.type,scope.row.payOrderNo)" type="text" class="addDetail">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import {
  listTradeDetails,
  selectBaseShopPageList,
  listTradeDetailsExport
} from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["sub", "merchantId", "isShop", "power"]),
  data() {
    return {
      storeLists: [], // 门店列表
      typeTransaction: [
        {
          // 交易类型
          id: "",
          name: "全部"
        },
        {
          id: "1",
          name: "售卖"
        },
        {
          id: "2",
          name: "退货退款"
        }
      ],
      type: [
        {
          // 类型
          id: "",
          name: "全部"
        },
        {
          id: "1",
          name: "商品售卖"
        },
        {
          id: "2",
          name: "服务售卖"
        },
        {
          id: "3",
          name: "计次卡"
        }
      ],
      selectdata: {
        transactionTime: [], // 交易时间
        typeTransaction: "", // 交易类型
        type: "", // 类型
        storeId: "", // 门店
        keyWord: "" // 会员手机号
      },
      rules: {
        timeStart: [
          { required: false, message: "请输入开始时间", trigger: "change" }
        ],
        timeEnd: [
          { required: false, message: "请输入开始时间", trigger: "change" }
        ]
      },
      dataList: [], //列表数据
      //   分页
      pageSize: 10,
      totalItems: 0,
      currentPage: 1,
      exportData: {}
    };
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.isShop != 0) {
      this.warehouseList();
    }
    this.data();
  },
  methods: {
    routerPush(id, orderType, type, payOrderNo) {
      util.routerTo("/data-center/trading-flow/tradingFlow-info", {
        id: id,
        type: type,
        orderType: orderType,
        payOrderNo: payOrderNo
      });
    },
    //  交易时间
    tradeTime: function(row) {
      return util.foryear(row.tradeTime) + " " + util.fortime(row.tradeTime);
    },
    price: function(row) {
      if (row.type == 1) {
        return `+${row.price}`;
      } else {
        return `-${row.price}`;
      }
    },
    data(picker) {
      //  获取今天日期
      const currentDate = new Date();
      var currentDates = currentDate.setTime(currentDate.getTime());
      var transactionDate = util.foryear(parseInt(currentDates));
      this.selectdata.transactionTime.push(transactionDate);
      this.selectdata.transactionTime.push(transactionDate);
      this.tableget(this.pageSize, 1);
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      var companyId = "",
        shopId = "";
      if (this.isShop == 0) {
        companyId = "";
        shopId = this.merchantId;
      } else {
        companyId = this.merchantId;
        shopId = this.selectdata.storeId;
      }
      let dailySales = {
        companyId: companyId,
        startTime: new Date(
          `${this.selectdata.transactionTime[0]} 00:00:00`
        ).getTime(),
        endTime: new Date(
          `${this.selectdata.transactionTime[1]} 23:59:59`
        ).getTime(),
        type: this.selectdata.typeTransaction,
        chlidType: this.selectdata.type,
        shopId: shopId,
        iphone: this.selectdata.keyWord,
        pageNum: pageNum,
        pageSize: pageSize
      };
      this.exportData = {
        companyId: companyId,
        startTime: new Date(
          `${this.selectdata.transactionTime[0]} 00:00:00`
        ).getTime(),
        endTime: new Date(
          `${this.selectdata.transactionTime[1]} 23:59:59`
        ).getTime(),
        type: this.selectdata.typeTransaction,
        chlidType: this.selectdata.type,
        shopId: shopId,
        iphone: this.selectdata.keyWord
      };
      listTradeDetails(dailySales).then(res => {
        this.dataList = res.data.list;
        this.totalItems = res.data.pageTotal;
        this.currentPage=pageNum
      });
    },
    // 搜索
    searchSelect() {
      this.currentPage=1
      this.tableget(this.pageSize, this.currentPage);
    },
    //跳页
    toPage() {
      this.tableget(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1;
      this.tableget(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, val);
    },
    // 门店列表
    warehouseList() {
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: 3
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.storeLists = res.data.list;
      });
    },
    // 导出
    download() {
      if (this.dataList.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        listTradeDetailsExport(this.exportData).then(res => {
          let fileName = "储值交易流水.xlsx";
          fileDownload(res, fileName);
        });
      }
    }
  }
};
</script>
<style scoped>
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
</style>
<style>
.outsourcingstatistics .delete .el-input__suffix {
  display: none;
}
.outsourcingstatistics .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.outsourcingstatistics .el-form-item {
  margin-bottom: 10px;
}
</style>



